<template>
  <div class="container">
    <!-- 人口图表 -->
    <div class="peopleChart">
      <div id="chart1"></div>
      <div id="chart2"></div>
      <div id="chart3"></div>
    </div>
    <!-- 设施列表 -->
    <div class="POIlist">
      <div class="listContainer">
        <div v-for="(data, index) in poiList" :key="index" class="row">
          <div class="title1">
            <span>{{ data.title }}</span>
          </div>
          <div
            v-for="(d, index) in data.list"
            :key="index"
            :style="{ backgroundColor: d.color }"
            @click="POIclick"
          >
            <img src="@/assets/pic2/定位.png" />
            <span>{{ d.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable */
import chartOptins from "@/components/chartOptions.js";
import * as echarts from "echarts";
import { getCurrentInstance, onMounted } from "vue-demi";
import { useStore } from "vuex";
import pubsub from "pubsub-js";

export default {
  name: "netCut2",
  data() {
    return {
      poiList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let subList = [];
    let pois = [];

    onMounted(() => {
      //   制作人口图表
      createPeopleChart();
      //   制作POI设施列表
      createPOIList();
      //退出
      subList[1] = pubsub.subscribe("netQuit", () => {
        subList.forEach((element) => {
          pubsub.unsubscribe(element);
        });
      });
    });

    //制作POI设施列表函数
    function createPOIList() {
      let features = store.state.POIFeatures;
      pois = features;
      proxy.poiList = [];
      // 颜色列表
      let colorList = [
        "#1296db",
        "#f89407",
        "#83c6c2",
        "#d81e06",
        "#02bb5c",
        "#d4237a",
        "#4f68b0",
        "#8a8a8a",
        "#13227a",
        "#7a1103",
        "#2c2c2c",
        "#9f05fa",
      ];
      // 地物类型整合
      let lbList = [features[0]["LB"]];
      let lb = features[0]["LB"];
      features.forEach((feature) => {
        if (feature["LB"] != lb) {
          let isNew = true;
          lbList.forEach((element) => {
            if (element === feature["LB"]) isNew = false;
          });
          if (isNew) {
            lbList.push(feature["LB"]);
            lb = feature["LB"];
          }
        }
      });
      // 按地物类型分配颜色
      for (let i = 0; i < lbList.length; i++) {
        let list = [];
        features.forEach((feature) => {
          if (feature["LB"] === lbList[i]) {
            list.push({
              name: feature["MC"],
              color: colorList[i],
            });
          }
        });
        proxy.poiList.push({
          title: lbList[i],
          list: list,
        });
      }
      console.log(proxy.poiList);
    }

    //制作人口图表函数
    function createPeopleChart() {
      let people = [];
      store.state.peopleInNet.forEach((element) => {
        element.forEach((e) => {
          people.push(e);
        });
      });
      //   统计人口类型
      let typeData = census(people, "RYLX").reverse();
      let chartFun = function (name) {
        let data = typeData;
        let tarValue = 0;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        let arr = [name.split("-")[0] + " | " + tarValue + "人"];
        return arr.join("\n");
      };
      let option = chartOptins.dataInput1(
        typeData,
        "人员流动类型",
        chartFun,
        ["50%", "70%"],
        ["29%", "50%"],
        "0%",
        "45%",
        "59%",
        "10.5%"
      );
      initChart("chart1", option);
      //   统计数据源
      let buidlings = [];
      store.state.buidlingsInNet.forEach((element) => {
        buidlings.push({
          name: element.name,
          value: element.people,
        });
      });
      buidlings = sort(buidlings);
      chartFun = function (name) {
        let data = buidlings;
        let tarValue = 0;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        let arr = [name.split("金洲村")[1] + " | " + tarValue + "人"];
        return arr.join("\n");
      };
      option = chartOptins.dataInput1(
        buidlings,
        "楼栋人口统计",
        chartFun,
        ["50%", "70%"],
        ["25%", "50%"],
        "40%",
        "45%",
        "47%",
        "10%"
      );
      initChart("chart2", option);
      //   收集省份来源
      let provinceData = getProvince(people);
      provinceData = sort(provinceData);
      chartFun = function (name) {
        let data = provinceData;
        let tarValue = 0;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        let arr = [name + " | " + tarValue + "人"];
        return arr.join("\n");
      };
      option = chartOptins.dataInput1(
        provinceData,
        "来源省份统计",
        chartFun,
        ["50%", "70%"],
        ["30%", "50%"],
        "40%",
        "45%",
        "58%",
        "15%"
      );
      initChart("chart3", option);
    }

    //数据统计函数
    function census(peopleList, value) {
      // 统计类型
      let typeName = [];
      let type = "";
      let isFirst = true;
      peopleList.forEach((people) => {
        let t = people[value];
        if (isFirst) {
          type = t;
          typeName.push(t);
          isFirst = false;
        } else {
          // 与当前采集值不一致
          if (t != type) {
            // 判断是否为新值
            let isNew = true;
            for (let i = 0; i < typeName.length; i++) {
              if (typeName[i] === t) {
                isNew = false;
              }
            }
            // 新值则存入
            if (isNew) {
              typeName.push(t);
              type = t;
            }
          }
        }
      });
      // 统计个数
      let typeValue = [];
      typeName.forEach((element) => {
        let count = 0;
        peopleList.forEach((people) => {
          if (element === people[value]) count += 1;
        });
        typeValue.push(count);
      });
      // console.log(typeName, typeValue);
      let dataList = [];
      for (let i = 0; i < typeName.length; i++) {
        dataList.push({
          value: typeValue[i],
          name: typeName[i],
        });
      }
      return dataList;
    }

    // 制作图表函数
    function initChart(domID, option) {
      document.getElementById(domID).removeAttribute("_echarts_instance_");
      var chart = echarts.init(document.getElementById(domID), "dark");
      // 把配置和数据放这里
      chart.setOption(option);
      window.onresize = function () {
        chart.resize();
      };
      return chart;
    }

    // 收集省份来源
    function getProvince(peopleList) {
      // 统计类型
      let value = "HJXZ";
      let typeName = [];
      let type = "";
      let isFirst = true;
      //   遍历
      for (let i = 0; i < peopleList.length; i++) {
        let people = peopleList[i];
        let t = people[value].slice(0, 3);
        if (t.indexOf("省") != -1) {
          if (isFirst) {
            type = t;
            typeName.push(t);
            isFirst = false;
          } else {
            // 与当前采集值不一致
            if (t != type) {
              // 判断是否为新值
              let isNew = true;
              for (let i = 0; i < typeName.length; i++) {
                if (typeName[i] === t) {
                  isNew = false;
                }
              }
              // 新值则存入
              if (isNew) {
                typeName.push(t);
                type = t;
              }
            }
          }
        }
      }
      //   广西、重庆矫正
      for (let i = 0; i < typeName.length; i++) {
        if (typeName[i] === "广西省") typeName[i] = "广西壮";
        if (typeName[i] === "重庆省") typeName[i] = "重庆市";
      }
      // 统计个数
      let typeValue = [];
      typeName.forEach((element) => {
        let count = 0;
        peopleList.forEach((people) => {
          if (element === people[value].slice(0, 3)) count += 1;
        });
        typeValue.push(count);
      });
      // console.log(typeName, typeValue);
      let dataList = [];
      for (let i = 0; i < typeName.length; i++) {
        dataList.push({
          value: typeValue[i],
          name: typeName[i],
        });
      }
      //   广西矫正
      dataList.forEach((element) => {
        if (element.name === "广西壮") element.name = "广西壮族自治区";
      });
      //   console.log(dataList);
      return dataList;
    }

    // 排序函数
    function sort(arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = 0; j < arr.length - 1 - i; j++) {
          if (Number(arr[j].value) > Number(arr[j + 1].value)) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }
      arr = arr.reverse();
      return arr;
    }

    //POI点击
    function POIclick() {
      let name = event.target.innerHTML;
      pois.forEach((element) => {
        if (element.MC === name) {
          pubsub.publish("toPOI", element);
        }
      });
    }

    return { subList, POIclick };
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 90%;
  width: 100%;
  background-color: rgba(6, 19, 31, 0.8);
}
.peopleChart {
  width: 70%;
  height: 95%;
  position: relative;
  top: 2.5%;
  border-right: 1px solid #7a7a7a;
  float: left;
  > #chart1,
  #chart2,
  #chart3 {
    position: relative;
    top: -0.5%;
    width: 29%;
    height: 100%;
    float: left;
  }
  > #chart2 {
    width: 36%;
    height: 100%;
  }
  > #chart3 {
    width: 35%;
    height: 100%;
  }
}
.POIlist {
  width: 30%;
  float: left;
  max-height: 100%;
  overflow-y: scroll;
  > .listContainer {
    > .row {
      color: white;
      display: block;
      width: 100%;
      text-align: left;
      > div {
        color: white;
        background-color: #1296db;
        border-radius: 5px;
        display: inline-block;
        margin-left: 1.5%;
        margin-top: 1.5%;
        padding: 0% 1%;
        padding-top: 0.2%;
        > img {
          width: 25px;
        }
        > span {
          font-size: 110%;
          font-weight: bold;
        }
      }
      > .title1 {
        background-color: transparent;
        background-image: ~"url(@{app-images-root}/button_bg6.png)";
        background-size: 100% 100%;
        height: 30px;
        width: 300px;
        margin-left: 7px;
        display: block;
        > span {
          float: left;
          margin-left: 5%;
          font-size: 125%;
          font-weight: bold;
          color: white;
        }
      }
    }
  }
}
.POIlist::-webkit-scrollbar {
  width: 5px;
}
.POIlist::-webkit-scrollbar-thumb {
  height: 25px;
  border-radius: 15px;
  background: #1296db;
}
.row > div:hover {
  cursor: pointer;
}
</style>